<template>
	<view class="">
		<view style="display: flex;justify-content: center;align-items: center;">
			<view
				style="color: #000000; display: flex;justify-content: center;align-items: center;padding: 10rpx;margin: 20rpx 0;border-radius: 10rpx;box-shadow: 0 10rpx 5rpx #f5f5f5;">
				<image style="width: 50rpx;height: 50rpx;margin-right: 20rpx;" src="../../static/image/sousuo.png"
					mode="aspectFill"></image>
				<input @input="searchcontent" type="text" v-model="searchvalue" style="width: 500rpx;"
					placeholder="易拉罐" />
			</view>
			<text @click="cancel">取消</text>
		</view>
		<view style="padding: 20rpx 40rpx;border-top: #ebebeb 5rpx solid;">
			<view v-for="(item,index) in searchList">
				{{item}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchvalue: '',
				contentlist: ['易拉罐', '塑料', '有害垃圾', '可回收垃圾', '不可回收垃圾'],
				searchList: []
			}
		},
		methods: {
			cancel() {
				uni.navigateBack()
			},
			searchcontent() {
				this.searchList = []
				if (this.searchvalue.length != 0) {
					for (let i = 0; i < this.contentlist.length; i++) {
						if (this.contentlist[i].indexOf(this.searchvalue) != -1) {
							this.searchList.push(this.contentlist[i])
						}
					}
					if (this.searchList.length == 0) {
						this.searchList = ["未找到相关内容"]
					}
					console.log(this.searchList);
				}
			}
		}
	}
</script>

<style>

</style>
